<script setup lang="ts"></script>

<template name="skeleton">
  <view class="sk-container">
    <view class="viewport viewport">
      <view class="cover cover">
        <image class="image sk-image"></image>
      </view>
      <view class="tabs tabs">
        <text
          class="text active sk-transparent sk-text-34-7826-606 sk-text sk-pseudo sk-pseudo-circle"
          >抢先尝鲜</text
        >
        <text class="text sk-transparent sk-text-34-7826-591 sk-text">新品预告</text>
      </view>
      <scroll-view :scroll-y="true" class="scroll-view scroll-view">
        <view class="goods goods">
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
            <view class="name ellipsis sk-transparent sk-text-14-2857-791 sk-text"
              >女式复古蜥蜴纹质感牛皮钱包</view
            >
            <view class="price price">
              <text class="symbol sk-transparent sk-opacity">¥</text>
              <text class="number sk-transparent sk-text-0-0000-472 sk-text">104.00</text>
            </view>
          </navigator>
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
            <view class="name ellipsis sk-transparent sk-text-14-2857-277 sk-text"
              >加量50%不加价，贵州兴仁薏仁米600克</view
            >
            <view class="price price">
              <text class="symbol sk-transparent sk-opacity">¥</text>
              <text class="number sk-transparent sk-text-0-0000-876 sk-text">19.00</text>
            </view>
          </navigator>
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
            <view class="name ellipsis sk-transparent sk-text-14-2857-508 sk-text"
              >莆田桂圆肉368克</view
            >
            <view class="price price">
              <text class="symbol sk-transparent sk-opacity">¥</text>
              <text class="number sk-transparent sk-text-0-0000-676 sk-text">52.00</text>
            </view>
          </navigator>
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
            <view class="name ellipsis sk-transparent sk-text-14-2857-898 sk-text"
              >一包在手想走就走男士风琴多卡位便携卡包</view
            >
            <view class="price price">
              <text class="symbol sk-transparent sk-opacity">¥</text>
              <text class="number sk-transparent sk-text-0-0000-151 sk-text">121.00</text>
            </view>
          </navigator>
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
          </navigator>
          <navigator class="navigator navigator" hover-class="none">
            <image class="thumb sk-image"></image>
          </navigator>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style>
.sk-transparent {
  color: transparent !important;
}
.sk-text-34-7826-606 {
  background-image: linear-gradient(
    transparent 34.7826%,
    #eeeeee 0%,
    #eeeeee 65.2174%,
    transparent 0%
  ) !important;
  background-size: 100% 88.4615rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-34-7826-591 {
  background-image: linear-gradient(
    transparent 34.7826%,
    #eeeeee 0%,
    #eeeeee 65.2174%,
    transparent 0%
  ) !important;
  background-size: 100% 88.4615rpx;
  position: relative !important;
}
.sk-text-14-2857-791 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-0-0000-472 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28.8462rpx;
  position: relative !important;
}
.sk-text-14-2857-277 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35rpx;
  position: relative !important;
}
.sk-text-0-0000-876 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28.8462rpx;
  position: relative !important;
}
.sk-text-14-2857-508 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35rpx;
  position: relative !important;
}
.sk-text-0-0000-676 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28.8462rpx;
  position: relative !important;
}
.sk-text-14-2857-898 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35rpx;
  position: relative !important;
}
.sk-text-0-0000-151 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28.8462rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>

<style lang="scss">
/* #ifdef H5 || APP-PLUS */
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.scroll-view {
  flex: 1;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  .navigator {
    width: 345rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }
  .thumb {
    width: 305rpx;
    height: 305rpx;
  }
  .name {
    height: 88rpx;
    font-size: 26rpx;
  }
  .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }
  .symbol {
    font-size: 70%;
  }
  .decimal {
    font-size: 70%;
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
/* #endif */
</style>
